<template>
  <div class="parentLayer">
    父容器
    <br>
    <CrossLayer></CrossLayer>
  </div>
</template>

<script>
import CrossLayer from './CrossLayer.vue';
export default {
  components : {
    CrossLayer
  },
    
  provide () {
  return {
    // 简单类型非响应式的渲染
    color : this.color,
    // 复杂类型响应式渲染, 推荐使用
    userInfo : this.userInfo
  }
},

  data() {
    return {
      color: 'black',
      userInfo: {
        name: 'dcj',
        age: 26
      }
    }
  },
}
</script>

<style>
 .parentLayer {
    width: 200px;
    height: 200px;
    border: 3px solid;

 }
</style>